<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
         p{
            position: absolute;
            left:420px; top: 50px;
            padding: 10px 30px;
            color: white;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            
        }
        #canvas{
            cursor: pointer;
            background:#eee;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='../js/ball.js'></script>
    <script src="../js/line.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            canvas.width = document.body.clientWidth;
            canvas.height = document.body.scrollHeight;

            var ball = new Ball(20, "red"),
                line = new Line(0, 0, 200, 0),
                gravity = 0.2,                         //重力加速度
                bounce = -0.6,                         //反弹系数
                angleN =10;                           //斜面的旋转角度
           
                ball.x = 100;
                ball.y = 100;

                 line.x = 20;
                line.y = 300;
                line.rotation = angleN * Math.PI / 180;    //角度旋转

               //得到系统从斜面转到平面的cos和sin值(就是我们坐标旋转中的sin,cos值)
               var cos = Math.cos(line.rotation),         
                   sin = Math.sin(line.rotation);

               //动画循环
               
               console.log(line.rotation,cos,sin);

               //获取小球体与线的相对位置
               var x1 = ball.x - line.x,
                   y1 = ball.y - line.y,
                   
                   //旋转坐标
                   x2 = x1 * cos + y1 * sin,
                   y2 = y1 * cos - x1 * sin,
                   
                   //旋转速度
                   vx1 = ball.vx * cos + ball.vy * sin,
                   vy1 = ball.vy * cos - ball.vx * sin;
                    

                var cont=0;
                  

                  var line2 = new Line(ball.x,ball.y,line.x,line.y);
                    
                  
                  //旋转坐标
                   var x2 = x1 * cos + y1 * sin,
                   y2 = y1 * cos - x1 * sin;
                
                   var line3 = new Line(ball.x,ball.y,x2,y2);

                    console.log(x1,y1,x2,y2);

                   ball.draw(context);
                   line.draw(context);
                   line2.draw(context);
                    line3.draw(context);

              /*(function drawFrame(){
                    window.requestAnimationFrame(drawFrame, canvas);
                    context.clearRect(0, 0, canvas.width, canvas.height);

                    ball.vy += gravity;            
                       ball.x += ball.vx;                //初始为0，小球竖直往下落
                       if(cont<100){
                            ball.y += ball.vy;
                            cont++;
                       }
                      

                   var line2 = new Line(ball.x,ball.y,line.x,line.y);
                    console.log(x1,y1,x2,y2);
                    ball.draw(context);
                   line.draw(context);
                   line2.draw(context);
               }())*/
                
                var ss =0;

               (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               
               //球体运动
               ball.vy += gravity;            
               ball.x += ball.vx;                //初始为0，小球竖直往下落
               ball.y += ball.vy;
               
               console.log();

               //获取小球体与线的相对位置
               var x1 = ball.x - line.x,
                   y1 = ball.y - line.y,
                   
                   //旋转坐标
                   x2 = x1 * cos + y1 * sin,
                   y2 = y1 * cos - x1 * sin;
                   
                if(ss==0){
                        // console.log(cos,sin,x1*cos,y1*sin)
                         console.log(ball.x,ball.y,line.x,line.y,x1,y1,x2,y2,"--");
                    }
                  ss++;
                    
                  //旋转速度
                   vx1 = ball.vx * cos + ball.vy * sin,
                   vy1 = ball.vy * cos - ball.vx * sin;
               //如果小球与斜面碰撞
               var bounds = line.getBounds();
if( ball.x + ball.radius > bounds.x && ball.x - ball.radius < bounds.x + bounds.width){
               if(y2 > -ball.radius){ 
                    
                   
                                        
                   y2 = -ball.radius;              //重设小球的位置
                   vy1 *= bounce;                  //反弹
                 

                   // 所有东西都旋转回去
                   x1 = x2 * cos - y2 * sin;           //位置旋转回去，注意公式变化
                   y1 = y2 * cos + x2 * sin;
                   ball.vx = vx1 * cos - vy1 * sin;    //速度旋转回去
                   ball.vy = vy1 * cos + vx1 * sin;
                   ball.x = line.x + x1;               //小球位置变化
                   ball.y = line.y + y1;
               }
            
}          
               ball.draw(context);
               line.draw(context);
               
}())
        }
        //         坐标旋转
        //         newX = x*cos - y*sin;
        //         newY = y*cos + x*sin;

        //         //旋转回去
        //         newX = x*cos + y*sin;
        //         newY = y*cos - x*sin;
    </script>
</body>
</html>
